<template>
  <div >
   <swiper class="swiper" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>
      <img src="/static/a.jpg">
    </swiper-slide>
    <swiper-slide>
      <img src="/static/b.jpg">
    </swiper-slide>
    <swiper-slide>
      <img src="/static/c.jpg">
    </swiper-slide>
    
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
   <el-container class="content-body">
     <el-main class="content ">
       <div class="fillet box-bg pl">
       <h3 class="new-post-title">最新文章</h3>
      <ul 
      v-loading="postLoading"
      >
      <li
      class="post-box"
       v-for="(v,index) in post" :key="index">
         <router-link class="title cp"
          
       :to="{name:'post',params:{id: v._id}}"
            append
           tag="h4">{{v.title}}</router-link>
         <!-- <h4 class="title">{{v.title}}</h4> -->
         <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content bg-purple low-source"> <img src="/static/a.jpg"></div></el-col>
            <el-col class="digest wbba" :span="16"><div class="grid-content bg-purple">
              {{v.digest}}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="autor">
         <el-col :span="20">
              <div class="grid-content bg-purple">
                最后更新:{{v.edit_time|formatDate}} 浏览（{{v.read}}）
             </div>
           </el-col>
            <el-col :span="4">
              <div  class="cp f_r grid-content bg-purple">
              <router-link
                tag='span'
                :to="{name:'post',params:{id: v._id}}"
                >
                阅读原文》
                </router-link>
             </div>
           </el-col>
          </el-row>
      </li>
      </ul>
      </div>
     </el-main>
     <el-aside>
         <slide-list-widget type='about' title="关于我"/>
         <slide-list-widget title="按浏览"/>
         <slide-list-widget title="按时间"/>
     </el-aside>
   </el-container>
  </div>
</template>

<script>

import { Loading, Message } from 'element-ui'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import SlideListWidget from '@/components/widget/SlideListWidget'
import api from "@/api";

export default {
  name: "Index",
  components: {
    swiper,
    SlideListWidget,
    swiperSlide
  },
  created() {
    this.postLoading =true;
    api.queryPost({ 
      size:10
    })
    .then(res => {
      // console.log(o);
       this.postLoading =false;

      this.post = res.data.data;
      //  loadinginstace.close()
    });
  },
  data() {
    return {
      post:[],
      swiperOption: {
        //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        // notNextTick: true,
        slidesPerView: 3,
        spaceBetween: 30,
        // swiper configs 所有的配置同swiper官方api配置
        autoplay: 1000,
        // direction : 'vertical',
        // grabCursor: true,
        // setWrapperSize: true,
        // autoHeight: true,
        // pagination: ".swiper-pagination",
        // paginationClickable: true,
        // prevButton: ".swiper-button-prev", //上一张
        // nextButton: ".swiper-button-next", //下一张
        scrollbar: ".swiper-scrollbar", //滚动条
        mousewheelControl: true,
        observeParents: true,
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true
      }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.digest{
  color: #ccc;
}
.post-box {
  border-bottom: #ccc 1px solid;
  margin-bottom: 10px;
  overflow: hidden;
}
.wbba{
  word-break: break-all;  
}
.content-body {
  margin-top: 10px;
}

.autor {
  width: 100%;
  overflow: hidden;
  clear: both;
  margin: 20px 0 0 0;
  display: inline-block;
  color: #838383;
  font-size: 12px;
}
.f_r {
  color: #096;
  text-align: right;
}
.aside-box {
  margin-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
}
.title {
  line-height: 30px;
  height: 30px;
  margin: 10px 0;
}
.content {
  padding: 0;
  padding-right: 10px;
}
.fillet {
  border-radius: 10px;
}
.box-bg {
  background: #fff;
}
.swiper img {
  width: 100%;
  height: 200px;
}
.new-post-title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}
.low-source img {
  width: 100%;
  height: 80px;
}
</style>
